<!--
 * @Version: 1.0
 * @Autor:
 * @Date: 2021-03-31 12:18:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-12 18:07:02
 * @Description: 售后管理
-->
<template>
  <el-card class="app-container content_box" shadow="always">
    <div>
      <!-- <div class="header_title_box">
        <h2>售后订单管理</h2>
      </div> -->
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
      <el-tabs v-model="queryParam.type" style="margin-top:10px" type="card" @tab-click="handleSearch">
        <el-tab-pane label="订单退款" name="1" />
        <el-tab-pane label="退货退款" name="2" />
        <el-tab-pane label="订单补货" name="3" />
        <el-tab-pane label="订单召回" name="4" />
        <el-tab-pane label="地址修改" name="5" />
      </el-tabs>
      <div class="select_flex" style="margin-top:-10px">
        <div class="operation_button_box">
          <el-button v-action="'afterSaleOrder@export'" size="small" :disabled="data.length?false:true" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
        </div>
        <div class="select_button_box">
          <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            重置
          </el-button>
          <el-button size="small" @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" :max-height="screenHeigh" border fit @selection-change="handleSelectMulti">
          <!-- <el-table-column key="1" align="center" type="selection" width="55" /> -->
          <el-table-column key="2" label="操作" align="center" fixed width="260px">
            <template slot-scope="scope">
              <span v-if="scope.row.status !==1" v-action="'afterSaleOrder@orderCheck'" class="edit_style" @click="handleInfo(scope.row.id, 1)">审核</span>
              <span v-if="scope.row.status!==1 && scope.row.type!==5" v-action="'afterSaleOrder@update'" class="edit_style" @click="$router.push({path: `/afterSale/afterSaleOrderEdit/${scope.row.id}`, query: {type: queryParam.type}})">编辑</span>
              <!-- <span class="default_style" @click="handleInfo(scope.row.id)">详情</span> -->
              <span v-if="scope.row.status!==1" v-action="'afterSaleOrder@delete'" class="delete_style" @click="handleDelete(scope.row.id)">删除</span>
              <span v-if="scope.row.status===1 && (scope.row.order_type == 3 || scope.row.order_type == 2)" v-action="'afterSaleOrder@setModifyAmount'" class="edit_style" @click="handlEditFee(scope.row)">
                <!-- {{ scope.row.type === 4 ? '录入召回金额' : '录入修改费' }} -->
                录入修改费
              </span>
              <span v-if="scope.row.logistics_no!==''&&scope.row.is_warehousing!==1&&scope.row.type===2&&scope.row.status===1" v-action="'afterSaleOrder@returnsWarehous'" class="edit_style" @click="handleReturnGoods(scope.row)">退货入库</span>
              <span v-if="scope.row.is_warehousing!==1&&scope.row.type===3&&scope.row.status===1" v-action="'deliveryOrder@partDelivery'" class="edit_style" @click="replenishment(scope.row)">补货发货</span>
              <span v-if="scope.row.is_warehousing!==1&&scope.row.type===4&&scope.row.status===1&&scope.row.order_type !==3" v-action="'afterSaleOrder@recallWarehous'" class="edit_style" @click="handleReturnGoods(scope.row)">召回入库</span>
              <span v-if="scope.row.status===1&&scope.row.type===2 && scope.row.logistics_no ===''" v-action="'afterSaleOrder@deliveryUps'" class="edit_style" @click="getLogistics(scope.row)">获取物流单号</span>
              <span v-if="scope.row.is_warehousing!==1&&scope.row.status===1&&scope.row.type===2 && scope.row.logistics_no !==''" v-action="'afterSaleOrder@printLableUps'" class="edit_style" @click="deliveryGetLabel(scope.row.id)">打印面单</span>
            </template>
          </el-table-column>
          <el-table-column key="3" align="center" label="售后单号" prop="sale_order_no" width="150">
            <template slot-scope="scope">
              <span class="pointer blue" @click="handleInfo(scope.row.id)">{{ scope.row.sale_order_no }}</span>
            </template>
          </el-table-column>
          <el-table-column key="4" align="center" label="售后原因" prop="remarks" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.remarks ? scope.row.remarks: '-' }}
            </template>
          </el-table-column>
          <el-table-column v-if="queryParam.type === '3'" key="4.1" align="center" label="补货类型">
            <template slot-scope="scope">
              {{ scope.row.replenish_type === 1 ? '整件补货' : '配件补货' }}
            </template>
          </el-table-column>
          <el-table-column key="5.3" align="center" label="订单类型" prop="order_type_text" width="150" />
          <el-table-column key="5" align="center" label="原订单编号" prop="platform_order_no" width="160" />
          <el-table-column key="6" align="center" label="原平台订单编号" prop="platform_order_no2" width="180" />
          <el-table-column key="6.1" align="center" label="原平台订单编号2" prop="platform_no_ext" width="180" />
          <!-- platform_no_ext -->
          <el-table-column key="7" align="center" label="店铺名称" prop="shop_name" width="150" />
          <!-- <el-table-column key="7.1" align="center" label="原始订单类型" width="150">
            <template slot-scope="scope">
              {{ orderTypeData[scope.row.order_type] }}
            </template>
          </el-table-column> -->
          <!-- logistics_no -->
          <el-table-column key="7.3" align="center" label="系统sku" prop="goods_code" width="180" />
          <el-table-column key="7.4" align="center" label="商品名称" prop="name_ch" width="150" show-overflow-tooltip />
          <el-table-column key="7.5" align="center" label="商品分类" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.parent_name }}-{{ scope.row.category_name }}
            </template>
          </el-table-column>
          <el-table-column key="7.6" align="center" label="平台" prop="platform_name" show-overflow-tooltip />
          <el-table-column v-if="queryParam.type == '2'" key="7.2" align="center" label="物流单号" width="190" prop="logistics_no">
            <template slot-scope="scope">
              <!-- <el-button type="text">{{ scope.row.logistics_no}}</el-button> -->
              <el-popover placement="right" width="400" trigger="click" @show="showLogistics(scope.row.logistics_no)">
                <div v-loading="logisticsLoading" style="min-height: 200px;max-height:400px;overflow: auto;">
                  <DeliveryUps v-if="logisticsShow" :code="scope.row.logistics_no" :data-obj="dataObj" type="3" />
                </div>
                <el-button slot="reference" type="text" size="mini" style="-webkit-user-select: text;">{{ scope.row.logistics_no }}</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="company_id" label="客户id" /> -->
          <el-table-column v-if="queryParam.type === '2' || queryParam.type === '4'" key="9" align="center" label="是否入库" prop="status_text">
            <template slot-scope="scope">
              {{ scope.row.is_warehousing===1 ? '是': '否' }}
            </template>
          </el-table-column>
          <el-table-column v-if="queryParam.type === '3'" key="9" align="center" label="是否出库" prop="status_text">
            <template slot-scope="scope">
              {{ scope.row.is_warehousing===1 ? '是': '否' }}
            </template>
          </el-table-column>
          <el-table-column v-if="queryParam.type !== '1' && queryParam.type !== '5'" key="10" align="center" :label="`${queryParam.type==='3'?'补货数量':queryParam.type==='4'? '召回数量':'退货数量'}`" prop="recall_num" />
          <el-table-column v-if="queryParam.type !== '3' && queryParam.type !== '4' && queryParam.type !== '5'" key="11" align="center" label="退款金额(usd)" prop="refund_amount">
            <template slot-scope="scope">
              <app-price :price="scope.row.refund_amount" />
            </template>
          </el-table-column>
          <!-- fill_amount -->
          <el-table-column v-if="queryParam.type==='4'" key="11.9" align="center" label="召回售后产生费用">
            <template slot-scope="scope">
              {{ scope.row.fill_amount }}
            </template>
          </el-table-column>
          <!-- 召回操作费  modify_amount -->
          <el-table-column v-if="queryParam.type==='4'" key="11.33" align="center" label="召回修改费">
            <template slot-scope="scope">
              {{ scope.row.modify_amount }}
            </template>
          </el-table-column>
          <el-table-column v-if="queryParam.type==='4'" key="11.55" align="center" label="召回快递费">
            <template slot-scope="scope">
              {{ scope.row.logistics_fee }}
            </template>
          </el-table-column>
          <el-table-column v-if="queryParam.type==='3'" key="11.9" align="center" label="补货快递费">
            <template slot-scope="scope">
              {{ scope.row.logistics_fee }}
            </template>
          </el-table-column>
          <el-table-column v-if="queryParam.type==='2'" key="11.10" align="center" label="退货快递费">
            <template slot-scope="scope">
              {{ scope.row.logistics_fee }}
            </template>
          </el-table-column>
          <!-- refund_amount -->
          <el-table-column v-if="queryParam.type==='2' || queryParam.type==='1'|| queryParam.type==='3'" key="12" align="center" label="售后产生费用" prop="fill_amount">
            <template slot-scope="scope">
              <app-price :price="scope.row.fill_amount" />
            </template>
          </el-table-column>
          <el-table-column v-if="queryParam.type==='5'" key="12" align="center" label="售后产生费用" prop="modify_amount">
            <template slot-scope="scope">
              <app-price :price="scope.row.modify_amount" />
            </template>
          </el-table-column>
          <!-- <el-table-column key="12.1" align="center" :label="`${(queryParam.type==='2' || queryParam.type==='1')?'售后产生费用':queryParam.type==='4'?'召回操作费':'修改金额'}`" prop="modify_amount">
            <template slot-scope="scope">
              <app-price :price="scope.row.modify_amount" />
            </template>
          </el-table-column> -->
          <el-table-column key="8" align="center" label="审核状态" prop="status_text" />
          <el-table-column key="13" align="center" label="创建人" prop="creator_name" width="112" />
          <el-table-column key="14" align="center" label="创建时间" prop="created_at" width="174" />
          <el-table-column key="15" align="center" label="修改人" prop="update_name" width="112">
            <template slot-scope="scope">
              {{ scope.row.update_name?scope.row.update_name: '-' }}
            </template>
          </el-table-column>
          <el-table-column key="16" align="center" prop="updated_at" label="修改时间" width="174" />
        </el-table>
        <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50,100,200,500]" :page-size="queryParam.limit" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <!--下载字段选择-->
      <DownModul url="afterSaleOrders/export" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
      <!-- 详情 审核-->
      <AfterSaleOrderInfo :id="orderId" :params-type="queryParam.type" :type="type" :form-visible-down.sync="formVisibleInfo" @handleSearch="handleSearch" />
      <!-- 修改费用 -->
      <modifyAmount :id="orderId" :amount="modify_amount" :form-visible-down.sync="formVisibleModify" @handleSearch="handleSearch" />
      <!-- 退货入库，召回入库-->
      <returnGoods :data="orderItem" :form-visible-down.sync="formVisibleReturnGoods" @handleSearch="handleSearch" />
      <!-- 补货 -->
      <ReplenishmentDialog ref="replenishment" @success="getList" />
      <!-- 获取物流单号 -->
      <el-dialog title="获取物流单号" center :visible.sync="formVisibleWl" width="40%" @close="handleCancelWl">
        <el-form :ref="formName" :model="formFieldsData" :rules="rules">
          <el-form-item label="选择物流公司：" label-width="600" prop="type">
            <el-select v-model="formFieldsData.type" placeholder="选择物流公司">
              <el-option v-for="item in companyOption" :key="item.id" :label="item.name" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="已选择发货单">
            <div>{{ selectedCodes }}</div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancelWl()">取 消</el-button>
          <el-button :disabled="isbtn" :loading="isbtn" type="primary" @click="deliveryUps">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 打印物流面单 -->
      <el-dialog title="打印物流面单" center :visible.sync="formVisibleWlmd" width="750px" @close="handleCancelWlmd">
        <div v-loading="loadingFaceSheet">
          <div v-if="urlImage">
            <div style="height:480px;position: relative;">
              <el-image class="imag_rote" :src="urlImage" fit="cover" />
            </div>
            <div style="text-align: center;margin-top: 50px;position: absolute;bottom: 80px;left:50%;transform: translateX(-50%);">
              <el-button type="primary" @click="savePdf">预 览</el-button>
              <el-button @click="handleCancelWlmd">取 消</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
import DownModul from '@/components/DownModul/index.vue'
import AfterSaleOrderInfo from '../component/info.vue'
import modifyAmount from '../component/modifyAmount.vue'
import returnGoods from '../component/returnGoods.vue'
import ReplenishmentDialog from '../component/replenishmentDialog'
import FormSelections from '@/components/FormSelection'
import { lforwarderData } from '@/utils/publicData'
import { downloadUrl } from '@/utils/index'
// import Tempalant from '@/views/tempalant.vue'
import DeliveryUps from '@/components/DeliveryUps/index.vue'
import { deliveryUpsTrackingAfter } from '@/utils/publicData'

export default {
  name: 'AfterSaleOrder',
  directives: {
    action
  },
  components: { DownModul, AfterSaleOrderInfo, modifyAmount, returnGoods, ReplenishmentDialog, FormSelections, DeliveryUps },
  mixins: [formOperate],
  data() {
    return {
      // 查看物流详情
      logisticsLoading: false,
      logisticsShow: false,
      dataObj: {
        tracking_info: ''
      },
      // 打印物流面单
      urlImage: '',
      loadingFaceSheet: false,
      formVisibleWlmd: false,
      // 获取物流单号
      orderNoData: '',
      id: '',
      isbtn: false,
      formName: 'afterFrom',
      formVisibleWl: false,
      formFieldsData: {
        type: ''
      },
      companyOption: [],
      rules: {
        type: [{ required: true, message: '请选择物流公司', trigger: 'blur' }]
      },
      otherHeight: 455,
      secondUrl: 1, // 二级路由
      searchClass: 1,
      formItems: [
        { // sale_order_no
          label: '售后单号',
          key: 'sale_order_no',
          type: 'input',
          placeholder: '请输入售后单号'
        },
        {
          label: '订单编码',
          key: 'order_no',
          type: 'input',
          placeholder: '请输入订单编码'
        },
        {
          label: '售后原因',
          key: 'sale_reason',
          type: 'select',
          placeholder: '请输入售后原因',
          options: [
            {
              label: '客户无理由退款退货',
              value: '1'
            },
            {
              label: '描述不符',
              value: '2'
            },
            {
              label: '包装问题',
              value: '3'
            },
            {
              label: '质量问题',
              value: '4'
            },
            {
              label: '物流问题',
              value: '5'
            }
          ]
        },
        {
          label: '审核状态',
          key: 'status',
          type: 'select',
          placeholder: '请选择审核状态', // 0-待审核 1-审核通过 2-审核驳回
          options: [
            {
              label: '待审核',
              value: '0'
            },
            {
              label: '审核通过',
              value: '1'
            },
            {
              label: '审核驳回',
              value: '2'
            }
          ]
        },
        {
          label: '店铺名称',
          key: 'shop_name',
          type: 'input',
          placeholder: '请输入店铺名称'
        },
        {
          label: '商品名称',
          key: 'name_ch',
          type: 'input',
          placeholder: '请输入商品名称'
        },
        {
          label: '商品编码',
          key: 'goods_code',
          type: 'input',
          placeholder: '请输入商品编码'
        },
        {
          label: '商品分类',
          key: 'category_ids',
          type: 'cascader',
          cLabel: 'lable',
          cValue: 'value',
          options: []
        },
        {
          label: '物流单号',
          key: 'logistics_no',
          type: 'input',
          placeholder: '请输入物流单号'
        },
        {
          label: '平台名称',
          key: 'platform_name',
          type: 'input',
          placeholder: '请输入平台名称'
        },
        {
          label: '是否入库',
          key: 'is_warehousing',
          type: 'select',
          placeholder: '请选择是否入库',
          options: [
            {
              label: '否',
              value: '0'
            },
            {
              label: '是',
              value: '1'
            }
          ]
        }
      ],
      componentName: 'AfterSaleOrder',
      orderItem: {},
      formVisibleReturnGoods: false,
      type: '0',
      modify_amount: '0',
      formVisibleModify: false,
      formVisibleInfo: false,
      orderId: '',
      formVisibleDown: false,
      url: '/afterSaleOrder',
      queryParam: {
        order_no: '',
        status: '',
        type: '1',
        limit: 50
      },
      fiftyLimit: 50,
      // 0-销售订单;1-异常订单;2-借卖订单;3-客户订单;4-预售订单;5-亚马逊平台发货(FBA)
      orderTypeData: {
        0: '销售订单',
        1: '异常订单',
        2: '借卖订单',
        3: '客户订单',
        4: '预售订单',
        5: 'FBA'
      },
      option: [{
        value: 0,
        label: '待审核'
      },
      {
        value: 1,
        label: '审核通过'
      },
      {
        value: 2,
        label: '审核驳回'
      }],
      defaultQueryParam: ['type'],
      optionsModul: [
        {
          key: 'id',
          label: 'ID'
        },
        {
          key: 'type_text',
          label: '售后类型'
        },
        {
          key: 'sale_order_no',
          label: '订单编号'
        },
        {
          key: 'platform_order_no',
          label: '平台订单编号'
        },
        {
          key: 'platform_order_no2',
          label: '原平台订单编号'
        },
        {
          key: 'shop_name',
          label: '店铺名称'
        },
        {
          key: 'status_text',
          label: '订单状态'
        },
        {
          key: 'sale_reason',
          label: '售后原因'
        },
        {
          key: 'fill_amount',
          label: '申请售后时输入金额'
        },
        {
          key: 'modify_amount',
          label: '修改金额'
        },
        {
          key: 'logistics_no',
          label: '物流单号'
        },
        {
          key: 'logistics_name',
          label: '退款物流'
        },
        {
          key: 'created_at',
          label: '创建时间'
        }
      ]
    }
  },
  created() {
    const query = this.$route.query
    if (query && query.type) {
      this.queryParam.type = query.type
    }
    lforwarderData().then((data) => {
      this.companyOption = data.map((arr) => {
        arr.value = arr.id + ',' + arr.name
        return arr
      })
    })
  },
  // activated() {
  //   this.getList()
  // },
  // beforeRouteLeave(to, from, next) {
  //   // 判断离开的页面 if warehouseOrder/add 缓存 else 不缓存
  //   if (to.path.includes('/afterSale/afterSaleOrderEdit/')) {
  //     this.$store.commit('tagsView/ADD_CACHED_VIEW', { name: 'AfterSaleOrder', meta: {} })
  //   } else {
  //     this.$store.commit('tagsView/DEL_CACHED_VIEW', { name: 'AfterSaleOrder', meta: {} })
  //   }
  //   const time = setTimeout(() => {
  //     next()
  //     clearTimeout(time)
  //   }, 100)
  // },
  methods: {
    showLogistics(code) {
      this.dataObj = {}
      this.logisticsLoading = true
      this.logisticsShow = false
      const codeItem = code
      deliveryUpsTrackingAfter(codeItem).then((data) => {
        if (data) {
          if (Array.isArray(data)) {
            this.dataObj.tracking_info = data
          } else {
            this.dataObj.tracking_info = [data]
          }
        }
        this.logisticsLoading = false
        this.logisticsShow = true
      }).catch(() => {
        this.logisticsLoading = false
        this.logisticsShow = true
      })
    },
    // 保存pdf
    savePdf() {
      if (this.pdfData) {
        downloadUrl(this.pdfData)
      }
    },
    // 获取面单
    deliveryGetLabel(id) {
      this.id = id
      this.formVisibleWlmd = true
      this.loadingFaceSheet = true
      this.$http1
        .post(`/afterSaleOrders/printLableUps`, { after_id: id })
        .then((res) => {
          this.urlImage = res.data.images[0]
          this.pdfData = res.data.pdf
          this.loadingFaceSheet = false
        })
        .catch(() => {
          this.loadingFaceSheet = false
        })
    },
    handleCancelWlmd() {
      this.id = ''
      this.urlImage = ''
      this.pdfData = ''
      this.formVisibleWlmd = false
    },
    handleCancelWl() {
      this.formVisibleWl = false
    },
    // 获取运单号
    deliveryUps() {
      // 判断是否是UPS
      if ((this.formFieldsData.type.name).toUpperCase() !== 'UPS') {
        this.$message.info('物流目前只支持UPS')
        return false
      }
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          this.isbtn = true
          const data = {}
          data.id = this.id
          data.shipping_id = this.formFieldsData.type.id
          data.shipping_name = this.formFieldsData.type.name
          this.$http1
            .post(`/afterSaleOrders/deliveryUps`, data)
            .then((res) => {
              if (res.code === 10000) {
                this.$message.success('获取运单号成功')
                this.isbtn = false
                this.handleCancelWl()
                this.resetFormFields()
                this.handleSearch()
              }
            })
            .catch(() => {
              this.isbtn = false
            })
        } else {
          return false
        }
      })
    },
    // 获取物流单号
    getLogistics(data) {
      const orderNoData = data.sale_order_no
      this.id = data.id
      this.selectedCodes = orderNoData
      this.formFieldsData.type = ''
      this.formVisibleWl = true
    },
    // 导出
    handleExport() {
      const vm = this
      const params = {}
      const object = this.queryParam
      for (const key in object) {
        if (Object.hasOwnProperty.call(object, key)) {
          const element = object[key]
          params[key] = element
        }
      }
      //   vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    beforeSearch() {
      const vm = this
      if (vm.queryParam.category_ids && vm.queryParam.category_ids.length > 0) {
        // vm.queryParam.category_id = vm.queryParam.category_ids.pop()
        const arr = vm.queryParam.category_ids
        vm.queryParam.category_id = arr[arr.length - 1]
      } else {
        vm.queryParam.category_id = ''
      }
    },
    // 补货发货
    replenishment(row) {
      const vm = this
      vm.$refs.replenishment.show(row.id) // 显示补货发货弹窗
    },
    // 编辑费用
    handlEditFee(data) {
      this.formVisibleModify = true
      this.orderId = data.id + ''
      this.modify_amount = data.modify_amount + ''
    },
    // 详情
    handleInfo(id, type) {
      this.orderId = id + ''
      this.formVisibleInfo = true
      this.type = type + '' // 审核状态
    },
    // 退货入库
    handleReturnGoods(item) {
      this.formVisibleReturnGoods = true
      this.orderItem = item
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container .operation_button_box {
  margin: 5px 0 16px;
}
.imag_rote {
  height: 240px;
  width: 420px;
  transform: rotate(90deg) !important;
  -ms-transform: rotate(90deg); /* Internet Explorer */
  -moz-transform: rotate(90deg) !important; /* Firefox */
  -webkit-transform: rotate(90deg) !important; /* Safari 和 Chrome */
  -o-transform: rotate(90deg); /* Opera */
  position: absolute;
  top: 73px;
  left: 146px;
}
.imag_rotes {
  height: 240px;
  width: 420px;
  transform: rotate(90deg) !important;
  -ms-transform: rotate(90deg); /* Internet Explorer */
  -moz-transform: rotate(90deg) !important; /* Firefox */
  -webkit-transform: rotate(90deg) !important; /* Safari 和 Chrome */
  -o-transform: rotate(90deg); /* Opera */
  position: absolute;
  top: 100px;
  left: 146px;
}
</style>
